<template>
  <div>
    <SearchForm :onSearch="onSearch" :onReset="onReset" />
    <div class="chart-wrapper">
      <BasicChart :chartOption="chartOption"/>
    </div>
  </div>
</template>

<script>
import SearchForm from "./searchForm";
import BasicChart from "@/components/echarts/basicChart";
import api from "@/api/commonApi";
import Utils from '@/utils';
export default {
  components: {
    SearchForm,
    BasicChart
  },
  data() {
    return {
      chartOption: {
          color: ['#3398DB'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '10%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: [],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  name: '单位：kg',
                  type: 'value',
              }
          ],
          dataZoom: [
              {
                  show: true
              }
          ],
          series: [
              {
                  name: '体重',
                  type: 'bar',
                  barWidth: '60%',
                  label: {
                      show: true,
                      position: 'top'
                  },
                  data: []
              }
          ]
      }
    }
  },
  mounted() {
    this.patientwWeightList();
  },
  methods: {
    onSearch(values) {
      this.patientwWeightList({...values});
    },
    onReset() {
      this.patientwWeightList();
    },
    patientwWeightList({ fromTime, endTime } = { }) {
      const reqBody = {
        pageNo: 1,
        pageSize: 31,
        params: {
          memberId: this.$route.params.id
        }
      };
      fromTime && (reqBody.params.measuringTime_GOE = Utils.getNowDateBySpecialFormat(fromTime));
      endTime && (reqBody.params.measuringTime_LT = Utils.getNowDateBySpecialFormat(endTime));
      this.$axios.post(api.patientwWeightList, reqBody).then(res => {
        if (res.data.code === 1) {
          const list = res.data.object;
          list.reverse();
          this.chartOption.xAxis[0].data = list.map(item => item.measuringTime.slice(0, 10));
          this.chartOption.series[0].data = list.map(item => item.value);
        } else {
          this.$Message.info(res.data.message);
        }
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="less">
.chart-wrapper {
  height: 400px;
  // width: 800px;
}
</style>